import React, { useEffect, useMemo, useState } from 'react';
import { WdHeader } from '../../../components'
import { useRequest, useSet, useSetState } from 'ahooks';
import { getDiseaseTitle } from '../../../api/home';
import { DiseaseTitleState } from '../../home/knows';
import style from './style.module.scss'
import { addClassName } from '../../../utils';
import { consoltDoctor, getDoctorList } from '../../../api/con';
import { useNavigate } from 'react-router-dom';

// 医生列表请求参数
export interface DoctorListState {
  deptId: number
  condition: number
  sortBy?: number
  page: number
  count: number
}
// 医生列表响应结果
export interface DoctorListRespState {
  badNum: number
  doctorId: number  // 医生id  
  doctorName: string // 医生名称
  imagePic: string // 头像
  inauguralHospital: string  // 医院
  jobTitle: string // 职位
  praise: string
  praiseNum: number
  serverNum: number
  servicePrice: number
}

// deptId	int	科室id	2
// condition	int	条件	1=综合，2=好评 ，3=咨询数 ，4= 价格
// sortBy	int	排序非必须参数	当条件为4时，1=按高价格排序，不传为默认排序
// page	int	当前页	1
// count	int	当前页显示数据条数	5

const list = [{
  condition: 1,
  title: '综合'
}, {
  condition: 2,
  title: '好评'
}, {
  condition: 3,
  title: '咨询书'
}, {
  condition: 4,
  title: '价格'
}]

const Index: React.FC = () => {
  const navigate = useNavigate();
  // 科室列表
  const { data: titles = [] } = useRequest(async () => {
    const resp = await getDiseaseTitle();
    setParams({ deptId: resp.data.result[0].id })
    return resp.data.result as DiseaseTitleState[];
  })
  // 请求医生列表参数
  const [params, setParams] = useSetState({
    deptId: 0,
    condition: 1,
    page: 1,
    count: 3
  })
  // 医生列表
  const [doctorList, setDoctorList] = useState<DoctorListRespState[]>([])
  // 获取医生列表
  const getList = async () => {
    const resp = await getDoctorList(params);
    setDoctorList(resp.data.result)
  }
  // params 变化 重新获取 医生列表
  useEffect(() => {
    params.deptId && getList()
  }, [params])

  // 当前选中下表
  const [activeIndex, setActiveIndex] = useState(0);
  // 根据下表找到中间放大的医生
  const doctor = useMemo(() => {
    return doctorList[activeIndex] || {}
  }, [doctorList, activeIndex])

  const toChat = async () => {
    const resp = await consoltDoctor(doctor.doctorId);
    if (resp.data.status === '0000') {
      navigate('/con/chat')
    }
    navigate('/con/chat')
  }
  return (
    <div>
      <WdHeader mode="black"></WdHeader>
      {/* 横滚 */}
      <ul className={style['scroll-x']}>
        {
          titles.map(v => {
            return <li className={addClassName(style, 'scroll-item', params.deptId === v.id ? 'active' : '')} key={v.id} onClick={() => setParams({ deptId: v.id, condition: 1 })}>{v.departmentName}</li>
          })
        }
      </ul>

      {/* tab切换 */}
      <ul className={addClassName(style, 'tab')}>
        {
          list.map(v => {
            return <li key={v.condition} className={addClassName(style, v.condition === params.condition ? 'active' : '')} onClick={() => setParams({ condition: v.condition })}>{v.title}</li>
          })
        }
      </ul>
      {/* 中间 */}
      <div className={style.con}>
        <img src={doctor.imagePic} alt="" className={style.img} />
        <div className={style.middle}>
          <div className="left">
            <p>
              <span style={{ fontSize: 20 }}>{doctor.doctorName}</span>
              <span>{doctor.jobTitle}</span>
            </p>
            <p>
              {doctor.inauguralHospital}医院
            </p>
            <p>
              <span>好评率：{doctor.praise}</span>
              <span>服务患者任务： {doctor.serverNum}</span>
            </p>
          </div>
          <div className="right">
            <img src="" alt="" />
          </div>
        </div>
        <div className={style.btm}>
          <div className="left">
            {doctor.servicePrice}/H一次
          </div>
          <div className="right" onClick={() => toChat()}>
            立即咨询
          </div>
        </div>
      </div>
      {/* 底部 */}
      <div className={style.doctorList}>
        <span>&lt;</span>
        <div className={style.doctorContent}>
          {
            doctorList.map((v, i) => {
              return <dl key={v.doctorId} className={addClassName(style, 'doctorItem', i === activeIndex ? 'active' : '')} onClick={() => setActiveIndex(i)}>
                <dt>
                  <img src={v.imagePic} alt="" />
                </dt>
                <dd>
                  {v.doctorName}
                </dd>
              </dl>
            })
          }
        </div>
        <span onClick={() => setParams({ page: params.page + 1 })}>&gt;</span>
      </div>
    </div>
  )
}

export default Index